<template>
  <div class="subordinateBox">
      <div class="public-header mart">
        <h2 class="public-header-ch">子管理员列表</h2>
        <p class="public-header-en">HOSTING COMPETITIONS</p>
        <div class="public-header-line"></div>
      </div>
      <el-button type="text" @click="dialogVisible = true" class='pannel-creat'>创建子管理员</el-button>
      <!-- <button class='pannel-creat'>创建下属机构</button> -->
      <div class="pannel-table">
        <table>
          <thead>
            <tr>
              <th>创建时间</th>
              <th>下属机构列表</th>
              <th>类型</th>
              <th>已创学员数量</th>
              <th>已开设课程数量</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr colspan='6' v-if="tableData.length == 0">尚无下属机构</tr>
            <tr v-for="(item,index) in tableData" :key="index">
              <td>{{item.creatTime}}</td>
              <td>{{item.mechanism}}</td>
              <td>{{item.type}}</td>
              <td>{{item.studentNum}}</td>
              <td>{{item.courseNum}}</td>
              <td class="operationBox">
                <button>编辑</button>
                <button>子管理员详情</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 创建下属机构 dialog -->
      <el-dialog title="" :visible.sync="dialogVisible" width="70%"  class="cdialog">
      <!-- <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> -->
        <!-- content -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  class="demo-ruleForm">
          <el-form-item label="下属机构名称" prop="name" class="dialogContent" width="width: 200px;">
            <el-input v-model="ruleForm.name" class="changeInput"></el-input>
          </el-form-item>
          <el-form-item label="登录邮箱" prop="email" class="dialogContent" width="width: 200px;">
            <el-input v-model="ruleForm.email" class="changeInput"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="password" class="dialogContent" width="width: 200px;">
            <el-input v-model="ruleForm.password" type="password" class="changeInput"></el-input>
          </el-form-item>
          <el-form-item label="下属机构类型" prop="organizationType">
            <el-select v-model="ruleForm.organizationType" placeholder="">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建学员数量上线" prop="studentNum">
            <el-select v-model="ruleForm.studentNum" placeholder="">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
            </el-select>
          </el-form-item>
          <div class="dialogLine">
            <div class="line-left">
              <el-form-item label="开课权限" prop="jurisdiction" required></el-form-item>
            </div>
            <!-- <div class="line-left" >开课权限</div> -->
            <div class="line-right">
              <div class="right-pannel clear">
                <el-form-item label="" prop="type" class="pannel-type">
                  <el-checkbox-group v-model="ruleForm.markSimos">
                    <el-checkbox label="Mark Simos" name="type"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="可开设课程数量" prop="courseNum1" class="pannel-num">
                  <el-select v-model="ruleForm.courseNum1" placeholder="">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right-pannel clear">
                <el-form-item label="" prop="type" class="pannel-type">
                  <el-checkbox-group v-model="ruleForm.changeMan">
                    <el-checkbox label="ChangeMan" name="type"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="可开设课程数量" prop="courseNum2" class="pannel-num">
                  <el-select v-model="ruleForm.courseNum1" placeholder="">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right-pannel clear">
                <el-form-item label="" prop="type" class="pannel-type">
                  <el-checkbox-group v-model="ruleForm.teamSynergy">
                    <el-checkbox label="TeamSynergy" name="type"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="可开设课程数量" prop="courseNum3" class="pannel-num">
                  <el-select v-model="ruleForm.courseNum1" placeholder="">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </div>

        </el-form>
        <!-- content end-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <!-- <el-button @click="resetForm('ruleForm')">取 消</el-button> -->
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
          <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
        </span>
      </el-dialog>
      <!-- 创建下属机构 dialog end-->

      <!-- 创建成功 dialog -->
      <div class="successfulBox" v-show="successDialog == true">
        <div class="successContent">
          <h3>创建成功</h3>
          <img src="../../static/image/succes.png" alt="">
          <p>此页面将于 <span>{{count}}</span>秒后自动关闭。 </p>
          <div>如未自动关闭，请点击[完成]按钮</div>
          <button class='pannel-creat success-creat' @click="successDialogdisappear()">完成</button>
        </div>
      </div>
      <!-- 创建成功 dialog end-->
  </div>
</template>
<script>
export default {
  data(){
    return{
      //dialog
      dialogVisible: false,
      // 创建成功dialog
      successDialog:false,
      // 倒计时
      count:'',
      //
      ruleForm: {
          name: '',
          email:'',
          password:'',
          organizationType: '',
          studentNum:'',
          courseNum1:'',
          courseNum2:'',
          courseNum3:'',
          markSimos:'',
          changeMan:'',
          teamSynergy:'',
          // markSimos:'',
          // changeMan:'',
          // teamSynergy:'',
          // date1: '',
          // date2: '',
          // delivery: false,
          // type: [],
          // resource: '',
          // desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入下属机构名称', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入登录邮箱', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            //{ type: 'password', message: '', trigger: ['blur', 'change'] }
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          
          organizationType: [
            { required: true, message: '请选择下属机构类型', trigger: 'change' }
          ],
          studentNum: [
            { required: true, message: '请选择学员数量', trigger: 'change' }
          ],
          courseNum1: [
            { required: true, message: '请选择课程数量', trigger: 'change' }
          ],
          courseNum2: [
            { required: true, message: '请选择课程数量', trigger: 'change' }
          ],
          courseNum3: [
            { required: true, message: '请选择课程数量', trigger: 'change' }
          ],

          // date1: [
          //   { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          // ],
          // date2: [
          //   { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          // ],
          // type: [
          //   { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          // ],
          // resource: [
          //   { required: true, message: '请选择活动资源', trigger: 'change' }
          // ],
          // desc: [
          //   { required: true, message: '请填写活动形式', trigger: 'blur' }
          // ]
        },
     
      
      // element表格
      tableData:[
        {
          creatTime:'2018-05-02',
          mechanism:'小白',
          type:'部门',
          studentNum:10,
          courseNum:5
        }
      ]
    }
  },
  methods:{
    // dialog
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    // dialog Content
    // dialog 确定
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // dialog 重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 倒计时
      getCode(){
        const TIME_COUNT = 3;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
              } else {
                this.successDialog = false;
                clearInterval(this.timer);
                this.timer = null;
              }
          }, 1000)
        }
      },
      // 确认弹窗关闭
      successDialogdisappear(){
        //alert(1)
        this.successDialog = false;
        console.log(this.successDialog);
      }  
      
      

  },
  cretated(){

  },
  mounted(){
    this.getCode();
  }
}
</script>
